<!DOCTYPE HTML>
<html>
<head>
    <!-- twitter bootstrap CSS stylesheet - included to make things pretty, not needed or used by cornerstone -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- cornerstone css - provides some useful css classes -->
    <link href="../../dist/cornerstone.css" rel="stylesheet">
</head>
<body>
<div class="container">

    <h1>
        htmloverlays/index.html
    </h1>
    This example demonstrates using HTML to put overlays on top of the image
    <br>
    <br>

    <!-- note we disable selection on the top most div -->
    <div style="width:512px;height:512px;position:relative;color: white;"
         class="cornerstone-enabled-image"
         oncontextmenu="return false"
         unselectable='on'
         onselectstart='return false;'
         onmousedown='return false;'>
        <div id="dicomImage"
             style="width:512px;height:512px;top:0px;left:0px; position:absolute">
        </div>
        <div id="topleft" style="position: absolute;top:0px; left:0px">
            Patient Name
        </div>
        <div id="topright" style="position: absolute;top:0px; right:0px">
            Hospital
        </div>
        <div id="bottomright" style="position: absolute;bottom:0px; right:0px">
            Zoom:
        </div>
        <div id="bottomleft" style="position: absolute;bottom:0px; left:0px">
            WW/WC:
        </div>

    </div>



</div>
</body>

<!-- cornerstone depends on jQuery so it must be loaded first-->
<script src="../jquery.min.js"></script>

<!-- include the cornerstone library -->
<script src="../../dist/cornerstone.js"></script>

<!-- include special code for these examples which provides images -->
<script src="../exampleImageIdLoader.js"></script>

<script>
    $(document).ready(function() {
        // image enable the element
        var element = document.getElementById('dicomImage');
        cornerstone.enable(element);

        // load the image and display it
        var imageId = 'example://1';
        cornerstone.loadImage(imageId).done(function(image) {
            cornerstone.displayImage(element, image);
            var viewport = cornerstone.getViewport(element);
            $('#bottomright').text("Zoom: " + viewport.scale + "x");
            $('#bottomleft').text("WW/WC:" + Math.round(viewport.voi.windowWidth) + "/" + Math.round(viewport.voi.windowCenter));
        });


        // add event handlers to mouse move to adjust window/center
        $('#dicomImage').mousedown(function(e) {
            var lastX = e.pageX;
            var lastY = e.pageY;

            $('#dicomImage').mousemove(function(e) {
                var deltaX = e.pageX - lastX,
                        deltaY = e.pageY - lastY ;
                lastX = e.pageX;
                lastY = e.pageY;

                var viewport = cornerstone.getViewport(element);
                viewport.voi.windowWidth += (deltaX / viewport.scale);
                viewport.voi.windowCenter += (deltaY / viewport.scale);
                cornerstone.setViewport(element, viewport);

                $('#bottomleft').text("WW/WL:" + Math.round(viewport.voi.windowWidth) + "/" + Math.round(viewport.voi.windowCenter));
            });

            $('#dicomImage').mouseup(function(e) {
                $('#dicomImage').unbind('mousemove');
            });
        });
    });

</script>

</html>
